import { ref } from 'vue';
import { Page } from '@vben/common-ui';
import { baseTablePage, type PageProps } from '@shensi/ui';


export const usePage = (props: PageProps, rest: any = {}) => {

  const { render, ...baseTableData } = baseTablePage({
    ...props,
  });

  return {
    render: (data: any) =>
      <Page class="h-full pr-0" contentClass={rest.page?.contentClass} heightOffset={rest.page?.heightOffset}>
        <div class="flex flex-col h-full bg-[#fff] py-4 px-6 rounded-lg" {...rest.slot}>
          {render(data)}
        </div>
      </Page>,
    ...baseTableData
  }

}

export const useLRLayoutPage = (props: PageProps, leftLayout: any, rest: any = {}) => {
  const { render, ...baseTableData } = usePage({
    ...props,
  }, {
    slot: { class: 'rounded-none rounded-tr-lg rounded-br-lg' },
    page: { contentClass: 'p-0', heightOffset: 32 },
    ...rest
  });

  return {
    render: (data: any) => (
      <div class="h-full p-4 flex">
        <div class="cert w-[238px] bg-white rounded-tl-lg rounded-bl-lg border-r border-gray-200">
          {leftLayout}
        </div>
        <div class="flex-auto">
          {
            render(data)
          }
        </div>
      </div>
    ),
    ...baseTableData
  }
}
